<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格</title>
    <link rel="stylesheet" href="../src/sea-ui.css">
</head>

<body>
    <div class="sea-content">
        <h1 class="sea-panel-title">grid</h1>
        <div class="sea-panel-body no-padding">
            <div class="sea-grid no-border">
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
            </div>
        </div>
        <h1 class="sea-panel-title">两列网格</h1>
        <div class="sea-panel-body no-padding">
            <div class="sea-grid sea-grid-2">
                <div class="sea-grid-item ">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
            </div>
        </div>

        <h1 class="sea-panel-title">四列网格</h1>
        <div class="sea-panel-body no-padding">
            <div class="sea-grid sea-grid-4">
                <div class="sea-grid-item ">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item ">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
            </div>
        </div>
        <h1 class="sea-panel-title">五列网格</h1>
        <div class="sea-panel-body no-padding">
            <div class="sea-grid sea-grid-5 no-border">
                <div class="sea-grid-item ">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item ">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
                <div class="sea-grid-item">
                    <i class="fa fa-area-chart sea-grid-icon"></i>
                    <p class="sea-grid-label">1</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>